<template>
   <div class="content">
        <TableLayout form-title="">
            <!-- <div slot="form-title" class="table-title"></div> -->
            <el-form :model="formInline" ref="formInline" :rules="rules" class="formInline"  label-width="80px" slot="form" v-collapse="true">
                 <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="订单号">
                             <el-input v-model="formInline.orderNumber" placeholder="请输入订单号"></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="8">
                        <el-form-item label="e学云ID号" prop="eCode">
                            <el-input v-model="formInline.eCode" placeholder="请输入e学云ID号" :maxlength="10"></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="8">
                        <el-form-item label="手机号" prop="phone">
                           <el-input v-model="formInline.phone" placeholder="请输入手机号" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="收货人">
                             <el-input v-model="formInline.receivedUserName" placeholder="请输入收货人"></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="8">
                        <el-form-item label="订单状态">
                            <el-select v-model="formInline.status" style="width:100%">
                                <el-option v-for="item in orderStatusArr" :key="item" :label="item.status" 
                                :value="item.statusId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="创建时间"> 
                            <el-row>
                                <el-col :span="11">
                                    <el-date-picker v-model="formInline.createTimeStart" 
                                    :clearable='true' :editable="false" type="date" placeholder="选择开始日期" 
                                    :picker-options="formInline.pickerOptions1" 
                                    @change="startDateChange" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">至</el-col>
                                <el-col :span="11">
                                    <el-date-picker v-model="formInline.createTimeEnd" :clearable='true' :editable="false" type="date" placeholder="选择结束日期" 
                                    :picker-options="formInline.pickerOptions2" 
                                     @change="endDateChange" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                            </el-row>              
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row :gutter="41">
                     <el-col :span="8">
                        <el-form-item label="支付状态">
                            <el-select v-model="formInline.payStatus" style="width:100%">
                                <el-option v-for="item in payStatusArr" :key="item" :label="item.status" 
                                :value="item.payStatusId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="searchList('formInline')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                 <div class="btnPosition">
                    <el-button @click="importFile">下载表格</el-button>
                </div>
            </div>
            <el-table :data="AnnounceList" border style="width: 100%" ref="multipleTable" @sort-change="sortChange">
                <el-table-column align="center" label="订单号">
                     <template scope="scope">
                            {{scope.row.orderNumber?scope.row.orderNumber:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="商品名称" min-width="80">
                      <template scope="scope">
                            {{scope.row.productName?scope.row.productName:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="e学云ID号">
                      <template scope="scope">
                            {{scope.row.eCode?scope.row.eCode:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="数量" sortable="custom"  min-width="90" prop="count">
                     <template scope="scope">
                            {{scope.row.count?scope.row.count:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="积分总价">
                     <template scope="scope">
                            {{scope.row.totalPrice?scope.row.totalPrice:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="现金总价">
                    <template scope="scope">
                            {{scope.row.totalCash?scope.row.totalCash:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="支付方式">
                      <template scope="scope">
                        <span>{{scope.row.payType=='0'?'支付宝':scope.row.payType=='1'?'微信':scope.row.payType=='2'?'积分':'--'}}</span>
                    </template>
                </el-table-column>
                 <el-table-column align="center" label="支付状态">
                      <template scope="scope">
                        <span>{{scope.row.payStatus=='0'?'成功':scope.row.payStatus=='1'?'失败':'--'}}</span>
                    </template>
                </el-table-column>
                  <el-table-column align="center" label="收货人">
                    <template scope="scope">
                            {{scope.row.receivedUserName?scope.row.receivedUserName:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="手机号">
                     <template scope="scope">
                            {{scope.row.phone?scope.row.phone:'--'}}
                      </template>
                </el-table-column>
                <el-table-column align="center" label="创建时间" sortable="custom" min-width="120" prop="createTime">
                      <template scope="scope">
                            {{scope.row.createTime?scope.row.createTime:'--'}}
                      </template>
                </el-table-column>
                  <el-table-column align="center" label="发货时间" sortable="custom" min-width="120" prop="shippingTime">
                       <template scope="scope">
                            {{scope.row.shippingTime?scope.row.shippingTime:'--'}}
                      </template>
                </el-table-column>
                <el-table-column align="center" label="运单号">
                     <template scope="scope">
                            {{scope.row.shippingNumber?scope.row.shippingNumber:'--'}}
                      </template>
                </el-table-column>
                <el-table-column align="center" label="状态" >
                     <template scope="scope">
                        <span>{{scope.row.status=='1'?'已发货':'未发货'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="操作">
                    <template scope="scope">
                        <!-- <el-button type="text" class="btn-success" 
                        @click="editOrSendGoods(scope.row)">{{scope.row.status=='1'?'编辑':'发货'}}</el-button> -->
                        <!-- 0支付 并发货 -->
                         <el-button type="text" class="btn-success" v-if="scope.row.status=='1'&&scope.row.payStatus=='0'"
                        @click="editOrSendGoods(scope.row)">编辑</el-button>
                         <!-- 0支付 未发货 -->
                         <el-button type="text" class="btn-success" v-if="scope.row.status=='0'&&scope.row.payStatus=='0'"
                        @click="editOrSendGoods(scope.row)">发货</el-button>
                        <!-- 1未支付 -->
                         <span v-if="scope.row.payStatus=='1'">--</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" 
                :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import TableLayout from 'components/TableLayout';
import moment from 'moment';
import validate from '@/utils/validate';
import { queryOrderList} from 'api/creditShop';

export default {
    components: {TableLayout},
    data() {
        return {
            formInline: {
                orderNumber: '', // 订单号
                eCode: '', // eId
                phone: '', // 手机号
                receivedUserName: '', // 收货人
                status: '',
                payStatus: '', // 支付状态
                createTimeStart: '',
                createTimeEnd: '',
                pickerOptions1: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now());
                    }
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now());
                    }
                }
            },
            loading: true,
            orderStatusArr: [
                {status: '全部', statusId: ''},
                {status: '未发货', statusId: '0'},
                {status: '已发货', statusId: '1'}
            ],
            payStatusArr: [
                {status: '全部', payStatusId: ''},
                {status: '失败', payStatusId: '1'},
                {status: '成功', payStatusId: '0'}
            ],
            addData: {
                dialogAdd: false,
                title: ''
            },
            AnnounceList: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            sequencingType: '',
            sequencingStatu: '',
            rules: {
                eCode: [...validate.exueCode()],
                phone: [...validate.phone()]
                // phone: [
                //     { pattern: /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/, message: '请输入正确的联系方式', trigger: 'blur'}
                // ]
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表

        }),
        ...mapGetters([
            'uid'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },

    created() {
        this.searchFetchData();
    },
    methods: {
          // 全局获取行数
        ...mapActions(['ChangePageSize']),
        searchList(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.listQuery.page=1;
                    this.loading = true;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },
        sortChange({ column, prop, order }) {
//            “sequencingType”: “ 排序类型 （0.创建时间 1.数量  2.发货时间）”,
// “sequencingStatus”: “排序状态 (0.升序 1.降序)”
            this.sequencingType=prop=='createTime'?'0':prop=='count'?'1':prop=='shippingTime'?'2':'';
            this.sequencingStatus=order=='ascending'?'0':order=='descending'?'1':'';
            this.searchFetchData(this.sequencingType, this.sequencingStatus)
            
        },
        // 导出当前列表（10条）
        importFile() {
            // console.log(LOCAL_API.scy)
            let eCode = this.formInline.eCode;
            let orderNumber = this.formInline.orderNumber;
            let phone = this.formInline.phone;
            let receivedUserName = this.formInline.receivedUserName;
            let status = this.formInline.status;
            let createTimeStart = this.formInline.createTimeStart;
            let createTimeEnd = this.formInline.createTimeEnd;
            let sequencingType = this.sequencingType;
            let sequencingStatus = this.sequencingStatus;
            let payStatus = this.formInline.payStatus;
            createTimeStart=createTimeStart?moment(createTimeStart).format('YYYY-MM-DD'):'';
            createTimeEnd=createTimeEnd?moment(createTimeEnd).format('YYYY-MM-DD'):'';
            window.location.href = `${LOCAL_API.scy}/order/getExcel?eCode=${eCode}&orderNumber=${orderNumber}&phone=${phone}&receivedUserName=${receivedUserName}&status=${status}&createTimeStart=${createTimeStart}&createTimeEnd=${createTimeEnd}&sequencingType=${sequencingType}&sequencingStatus=${sequencingStatus}&payStatus=${payStatus}`
        },
        // 编辑操作还是发货
        editOrSendGoods(row) {
            let id=row.id;
            if (row.status=='1') {// 编辑
                this.$router.push({path: `/orderManage/orderDetail/${id}/1`});
            }
            if (row.status=='0') {// 发货
                this.$router.push({path: `/orderManage/orderDetail/${id}/0`});
            }
        },
        // 查询列表
        searchFetchData() {
            this.loading= true;
            let page = this.listQuery.page;
            let rows = this.config.pageSize;
            let eCode = this.formInline.eCode;
            let orderNumber = this.formInline.orderNumber;
            let phone = this.formInline.phone;
            let receivedUserName = this.formInline.receivedUserName;
            let status = this.formInline.status;
            let createTimeStart = this.formInline.createTimeStart;
            let createTimeEnd = this.formInline.createTimeEnd;
            let sequencingType=this.sequencingType;
            let sequencingStatus=this.sequencingStatus;
            let payStatus=this.formInline.payStatus;
            createTimeStart=createTimeStart?moment(createTimeStart).format('YYYY-MM-DD'):'';
            createTimeEnd=createTimeEnd?moment(createTimeEnd).format('YYYY-MM-DD'):'';
            queryOrderList(
                page,
                rows,
                eCode,
                orderNumber,
                phone,
                receivedUserName,
                status,
                createTimeStart,
                createTimeEnd,
                sequencingType,
                sequencingStatus,
                payStatus
            ).then(res => {
                this.loading= false;
                this.AnnounceList = res.data.content.list;
                this.listQuery.total = parseInt(res.data.content.pagination.total);
            }).catch(() => {
                this.loading= false;
            });
        },
        startDateChange(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return (time.getTime() < (new Date(date).getTime() - 864e5)) || (time.getTime() > new Date().getTime());
                }
            }
        },
        endDateChange(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return (time.getTime() > new Date(date).getTime());
                }
            } 
        },
         // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },

        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
}
</style>
